<template>
  <div>
    <Header_h />
    <div class="sq_box_content" id="item_one">
      <bannerInfo :info="info" />
    </div>
    <div class="new_box_bgcolor">
      <div class="new_box">
        <div class="container">
          <section class="core_content_left core_content">
            <div class="s_flex s_align_items_center select_box">
              <div class="select_item">
                <el-select clearable @clear="clearValue" v-model="realm" placeholder="领域" @change="handelChange">
                  <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <div class="select_item">
                <el-select clearable @clear="clearValue" v-model="school" placeholder="院校" @change="handelChange">
                  <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <div class="select_item">
                <el-select clearable @clear="clearValue" v-model="team" placeholder="团队" @change="handelChange">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
            </div>
            <div class="item_list" v-for="(item, index) in list.list" :key="index" @click="goitemList(item)">
              <div class="number">
                <span class="cril"></span>
                #{{ index + 1 }}
              </div>
              <div class="s_flex s_justify_content_between s_flex_column">
                <div class="item_list_img">
                  <div class="img_wap">
                    <img class :src="item.imgname" alt />
                  </div>
                </div>
                <div class="right_info">
                  <div class="
                      s_flex
                      s_justify_content_between
                      s_align_items_center
                      s_flex-wrap
                    ">
                    <div class="s_flex s_align_items_center">
                      <el-tag size="small" class="tag_right" effect="plain">{{
                          item.realm
                      }}</el-tag>
                      <el-tag size="small" class="tag_right" effect="plain">{{
                          item.school
                      }}</el-tag>
                      <el-tag size="small" class="tag_right" effect="plain">{{
                          item.team
                      }}</el-tag>
                    </div>
                    <div class="
                        sq_content sq_sign_btn
                        info_text_div
                        sq_xl sq_sign_btn3
                      " @click.stop="getUrl(item)">
                      对接专利
                    </div>
                  </div>
                  <div class="pantent s_flex s_align_items_center">
                    <p class="sq_title3" style="color: #2a8b2d">
                      {{ item.pno }}
                    </p>
                    <el-tag v-if="item.status == '授权'" effect="dark" size="small" color="#4ba22f">授权</el-tag>
                    <el-tag effect="dark" size="small" color="#4ba22f" v-if="item.status == '部分无效'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#4ba22f" v-if="item.status == '权利恢复'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#6c778b" v-if="item.status == '未缴年费'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#6c778b" v-if="item.status == '撤回'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#6c778b" v-if="item.status == '驳回'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#6c778b" v-if="item.status == '期限届满'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#6c778b" v-if="item.status == '避重授权'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#6c778b" v-if="item.status == '全部撤销'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#da7b21" v-if="item.status == '实质审查'">{{ item.status }}
                    </el-tag>
                    <el-tag effect="dark" size="small" color="#da7b21" v-if="item.status == '公开'">{{ item.status }}
                    </el-tag>
                  </div>
                  <h3 class="
                      sq_tilte3
                      line_h_30
                      sq_tilte_color
                      content_spacing
                      ft_weight_400
                    ">
                    {{ item.tic }}
                  </h3>
                  <div class="sq_content sq_content_color">
                    <p class="ft_weight_400 line_h_26">
                      公开（公告）日：{{ item.pd }}
                    </p>
                    <p class="ft_weight_400 line_h_26">
                      当前申请(专利权)人：{{ item.aspo }}
                    </p>
                  </div>
                  <div class="info_text_div">
                    <p class="context zy_color">摘要</p>
                    <p class="context w words-hidden-2">{{ item.abso }}</p>
                  </div>
                  <div class="sq_content sq_sign_btn info_text_div sq_xs" @click.stop="getUrl(item)">
                    对接专利
                  </div>
                </div>
              </div>
            </div>
          </section>

          <div class="pagination">
            <el-pagination background small @current-change="handleCurrentChange" :current-page="list.page"
              :page-size="5" layout="total, prev, pager, next, jumper" :total="parseInt(list.count)" align="left"
              :pager-count="5"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <rightMenu @moveTo="moveTo" />
    <signUp :dialogVisible="dialogVisible" @handleClose="handleClose" @submit="submit" :type="type" :text="text" />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import bannerInfo from "@/components/web/bannerInfo";
import { excellentlist, consultAdd } from "@/api/web";
import { getTeams, getLabel } from "@/api/adminWeb";
import rightMenu from "@/components/web/rightMenu";
import signUp from "@/components/web/signUp";
import { PAGE_BASE_URL } from "@/config";

export default {
  components: {
    Header_h,
    Footer,
    bannerInfo,
    rightMenu,
    signUp,
  },
  data() {
    return {
      info: {
        title: "优秀专利汇总",
        content: "为顺德企业寻找高校合作搭建桥梁",
        img: require("@/assets/web/banner1.png"),
      },
      options: [],
      options2: [],
      options3: [],
      realm: "",
      school: "",
      team: "",
      ream_id: "",
      school_id: "",
      team_id: "",
      type: 7,
      list: [],
      dialogVisible: false,
      text: {
        title: "咨询",
        btn: "立即咨询",
      },
      url: "",
      page: sessionStorage.getItem('list_page') ? Number(sessionStorage.getItem('list_page')) : 1,
    };
  },
  mounted() {
    this.getList(this.page);
    this.getLabels();
  },
  methods: {
    // 点击详情页
    goitemList(item) {
      this.$router.push({
        path: '/detail',
        query: { pid: item.pid, pc: 1, share: 2 },
      })
      sessionStorage.setItem('list_page', this.page)
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.page = Number(currentPage)
        this.getList(this.page);

        let link = document.createElement('a')
        link.setAttribute("href", '#item_one');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    clearValue() {
      this.getList();
    },
    moveTo() {
      window.scrollTo(0, 0);
    },
    async handelChange(val) {
      this.options2 = await getLabel({
        type: 1,
        realm: this.realm,
        school: this.school,
      });
      this.options3 = await getLabel({
        type: 2,
        realm: this.realm,
        school: this.school,
      });
      this.options = await getTeams({ realm: this.realm, school: this.school });
      this.getList();
    },
    async getLabels() {
      this.options = await getTeams();
      this.options2 = await getLabel({ type: 1, school: this.school });
      this.options3 = await getLabel({ type: 2, school: this.school });
    },
    async getList(page) {
      try {
        this.list = await excellentlist({
          realm: this.realm,
          school: this.school,
          team: this.team,
          page_size: 5,
          page,
        });
        // console.log(this.list);
        // this.list={...this.list,count:12}
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async handleClose() {
      this.dialogVisible = false;
    },
    async submit(form) {
      try {
        await consultAdd({ ...form, from: this.url });
        this.$message.success("提交成功");
      } catch (error) {
        this.$message.error(error.message);
      }
      this.dialogVisible = false;
    },
    getUrl(item) {
      this.text = {
        title:
          "请填写您的联系方式，我们工作人员将尽快与您联系，将为您提供“" +
          item.tic +
          "”相关咨询服务。",
        btn: "提交",
      };
      this.type = 3;
      this.url = `${PAGE_BASE_URL}/#/detail?pid=${item.pid}`;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.new_box {
  margin-top: -4%;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;

  .pagination {
    width: 90%;
    margin: 40px auto 0;
  }
}

.core_content .item_list_img {
  width: 188px;
  height: 237px;
  object-fit: contain;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e6e9f0;
  border-radius: 5px;
  text-align: center;

  .img_wap {
    padding-bottom: 0;
    width: 100%;
    height: 100%;

    // position: relative;
    img {
      width: 100%;
      transition: all 0.5s ease;
      padding: 15px;
      object-fit: contain;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.li_active {
  width: 100%;
  background: #ffffff;
  box-shadow: 0 0 16px rgba(24, 76, 171, 0.16);
  border: none;
}

.right_info {
  width: 80%;
  // margin-left: 25px;
}

.core_content .item_list {
  padding: 23px 30px;
  width: 100%;
  // margin: 0 auto 30px;
  // margin-bottom: 30px;
  background: #ffffff;
  // border: 1px solid #ced4ea;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f7f9fc;
  }
}

.core_content .item_list:last-child {
  margin-bottom: 0;
}

.content_spacing {
  margin: 10px auto;
}

.core_content_left {
  width: 100%;
  // margin-left: 60px;
  background-color: #fff;
  height: 100%;
  box-shadow: 0 0 16px rgba(24, 76, 171, 0.16);
}

.core_content_right {
  width: 25%;
  background-color: #fff;
}

.content_right_spacing {
  margin: 10px 0;
}

.list_right {
  // border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}

.right_title {
  margin: 0 10px;
  padding: 10px 0;
}

.tag_right {
  margin-right: 20px;
}

.pantent {
  margin-top: 10px;

  p {
    margin-right: 20px;
  }
}

.number {
  margin-bottom: 10px;

  .cril {
    width: 13px;
    height: 13px;
    background: #3377ff;
    border-radius: 50%;
    display: inline-block;
  }
}

.select_box {
  padding: 30px;

  .select_item {
    margin-right: 45px;
  }
}

.zy_color {
  color: #3377ff;
  margin: 10px 0;
}

.w {
  width: 703px;
  line-height: 1.5;
}

@media (max-width: 750px) {
  .w {
    width: 100%;
  }

  .core_content .item_list {
    padding: 23px 15px;
  }

  .core_content .item_list_img {
    width: 100%;
    margin-bottom: 10px;
  }

  .tag_right {
    margin-right: 10px;
  }

  .select_box {
    padding: 15px;
  }

  .select_box .select_item {
    margin-right: 10px;
  }

  .right_info .sq_sign_btn {
    margin: 20px 0;
  }
}
</style>